<template>
  <div class="pie-wrap" :style="{ width: width, height: height }">
    <div class="pie" ref="pie"></div>
  </div>
</template>

<script>
import { gradientColor } from "@/utils/common";
import echarts from "echarts";
export default {
  props: {
    width: {
      default: () => "100%",
    },
    height: {
      default: () => "100%",
    },
    sum: {
      default: () => 0,
    },
    value: {
      type: Array,
      default: () => [
        { value: 335, name: "空军" },
        { value: 310, name: "飞机" },
        { value: 234, name: "海军" },
        { value: 135, name: "瓦良格" },
        { value: 1548, name: "J20" },
      ],
    },
    legend: {
      type: Array,
      default: () => ["空军", "飞机", "海军", "瓦良格", "J20"],
    },
    colors: {
      type: Array,
      default: () => [
        "#7846E5",
        "#3A95FF",
        "#516AFE",
        "#50A9F8",
        "#3B56FF",
        "#5AD8A6",
        "#41BCB3",
        "#1FD77C",
        "#3B56FF",
        "#0080FE",
        "#8C78F7",
        "#F66664",
        "#FFEA21",
        "#B93DE0",
        "#1AB3FF",
        "#00D97C",
        "#EA518E",
        "#00E3FF",
      ],
    },
  },
  data() {
    return {
      option: null,
      chart: null,
    };
  },
  watch: {
    value() {
      this.setOptions();
    },
  },
  methods: {
    setOptions() {
      this.option = {
        // color: new gradientColor("#7846E5","#3A95FF",this.value.length),
        color: this.colors,
        title: {
          text: "占比情况",
          left: "center",
          top: "center",
          textStyle: {
            color: "#fff",
            fontSize: 14,
            fontWeight: "400",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        legend: {
          // textStyle: {
          //   color: "rgba(93, 224, 251, 1)",
          // },
          orient: "vertical",
          itemWidth: 6,
          itemHeight: 6,
          top: "middle",
          right: "2%",
          width: "200",
          formatter: (name, val) => {
            if (this.value[this.legend.indexOf(name)].value == 0) {
              return name + "  " + "0" + "%";
            } else {
              return (
                name +
                "  " +
                (
                  this.value[this.legend.indexOf(name)].value / this.sum
                ).toFixed(2) *
                  100 +
                "%"
              );
            }
          },
          // orient: "vertical",
          // data: this.legend,
        },
        series: [
          {
            name: "标签占比情况",
            type: "pie",
            // radius: ["45%", "60%"],
            center: ["20%", "50%"],
            data: this.value,
            // roseType: "radius",
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      this.chart.setOption(this.option);
    },
  },
  mounted() {
    this.chart = echarts.init(this.$refs.pie);
    // this.setOptions();
    window.onresize = () => {
      this.chart.resize();
    };
  },
};
</script>

<style lang="scss" scoped>
.pie-wrap {
  width: 100%;
}
.pie {
  width: 100%;
  margin: 0 auto;
  height: 100%;
}
</style>
